<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header back title="我的留言"></Header>
		<div class="wapper">
			<template v-if="list.length>0">
				<Comment :list="list"></Comment>
			</template>
			<u-empty v-else description="暂无留言"></u-empty>
		</div>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import Comment from '../navs/comment.vue'

	function arr2tree(arr) {
		if (!Array.isArray(arr) || !arr.length) return;
		let map = {};
		arr.forEach((item) => (map[item.MessageID] = item));

		let roots = [];
		arr.forEach((item) => {
			const parent = map[item.ParentMessageID];
			if (parent) {
				(parent.children || (parent.children = [])).push(item);
			} else {
				roots.push(item);
			}
		});
		return roots;
	}
	export default {
		components: {
			Header,
			Comment
		},
		data() {
			return {
				height: 0,
				content: '',
				title: '详情',
				user: '',
				list: []
			}
		},
		methods: {
			async init() {
				let res = await this.$api.getOwnComment({
					openid: this.user.OpenID,
					PageSize:9999,
					PageIndex:1
				})
				this.list = res.UserData ? arr2tree(res.UserData) : []
				// this.list = arr2tree(
				// 	[{
				// 			"MessageID": 3,
				// 			"OpenID": "oF0KA6by99aM7K9-YDR_2uLuNbs8", //  留言/回复人的 openid
				// 			"UserName": "有点飘",
				// 			"UserHeaderUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI9nFJ80oiakdD5csQnicFN6HeLu01icopIM0ngicMBZezRmp7vDChuJoAjeJiawK7HTrk1CsGgmZ37H3Q/132",
				// 			"Message": "回复测试测试回复测试测试回复测试测试回复测试测试回复测试测试回复测试测试",
				// 			"CreateTime": "2023-05-20T17:00:33.09",
				// 			"ChangShangID": 31,
				// 			"ChangShangName": "五粮液",
				// 			"ParentMessageID": 1,
				// 			"Is_Recived": 1 //留言类型   是否是回复
				// 		},
				// 		{
				// 			"MessageID": 1,
				// 			"OpenID": "zsc",
				// 			"UserName": "测试用户zsc",
				// 			"UserHeaderUrl": null,
				// 			"Message": "测试测试",
				// 			"CreateTime": "2023-05-20T16:42:24.533",
				// 			"ChangShangID": 31,
				// 			"ChangShangName": "五粮液",
				// 			"ParentMessageID": 0,
				// 			"Is_Recived": 0 //留言类型   0 表示当前信心是主动发送 不是别人回复的
				// 		}
				// 	])
			}
		},
		mounted() {
			this.user = uni.getStorageSync('user')
			this.init()
		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			z-index: 100;
			margin-top: -280rpx;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;
			padding: 20rpx;
		}
	}
</style>